<template>
  <div class="index-container">
    <div class="top">
      <el-row>
        <span class="top-content-0" @click="handleReigster">免费注册</span>
      </el-row>
      <el-row class="top-content-1">
        <img src="../../../static/images/logo.png">
      </el-row>
      <el-row class="top-content-2">
        <span>为您提供专业、多样的定制加粉服务</span>
      </el-row>
      <el-row class = "top-content-3">
        <button class="top-btn" @click="handleLogin">立即登录</button>
        <!--<el-button  type="primary" size="small" style="width: 120px" @click="handleLogin">登录</el-button>-->
      </el-row>

    </div>
    <el-row class="conter">
      <span class="s-pannel">
        <!--<span><img src="../../../static/images/i_01.png"></span>-->
        <span class="title">真实粉丝</span>
        <span class="desc">
          所有粉丝都是通过我们的Wi-Fi连网渠道，主<br>
          动关注公众号，粉丝统计均来自微信官方后<br>
             台，保证粉丝真是有效，绝无虚假。</span>
      </span>
      <span class="s-pannel">
        <!--<span><img src="../../../static/images/i_02.png"></span>-->
        <span class="title">定向人群</span>
        <span class="desc">
          超过200万活跃路由器Wi-Fi，覆盖全国各省市，<br>
          尤其一线城市。可定向选择地区、家庭、商业等 <br>
           场景，借助精准画像技术，触达优质人群。
        </span>
      </span>
      <span class="s-pannel">
        <!--<span><img src="../../../static/images/i_03.png"></span>-->
        <span class="title">高留存率</span>
        <span class="desc">
          海量用户保证公众号粉丝快速增长，根据合<br/>
          作公众号官方数据显示，通过我们Wi-Fi渠道<br>
           来源的粉丝，留存率高，活跃度好。
        </span>
      </span>
    </el-row>
    <el-row class="bottom">
      <span>@2018 wiair.com 版权所有 深圳触云科技有限公司 粤ICP备14044373号</span>
    </el-row>
    <el-dialog
      title="欢迎登录触粉云平台"
      :visible.sync="showLoginDialog"
      width="25%"
      :show-close = false
      center>
      <el-form center :model="loginForm"  ref="loginForm" :rules="loginRules" label-position="top" >
        <el-form-item class="i-form-item" prop="mobile" >
          <i class="i-user"></i>
          <el-input v-model="loginForm.mobile"  placeholder="请输入您的账号"></el-input>
        </el-form-item>
        <el-form-item class="i-form-item" prop="pwd" >
          <i class="i-lock"></i>
          <el-input type="password"  placeholder="请输入您的密码" v-model="loginForm.pwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click.native.prevent="login" >登录</el-button>
        </el-form-item>
        <el-form-item>
          <span class="p-left" @click="handleForget">忘记密码</span>
          <a class="p-right" @click="handleReigster">免费注册</a>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="注册"
      :visible.sync="showRegisterDialog"
      width="25%"
      :show-close = false
      center>
      <el-form class="reigster-from" center :model="registerForm"  ref="registerForm" :rules="registerRules" label-position="top">
        <el-form-item class="i-form-item" prop="mobile">
          <el-input v-model="registerForm.mobile" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item class="i-form-item" prop="verification">
          <el-input name="code" v-model="registerForm.verification" type="text" autoComplete="on"
                    placeholder="请输入验证码"></el-input>
          <span type="primary" v-show="regShow" class="code"   @click="getRegCode">获取验证码</span>
          <span v-show="!regShow" v-if="count>=10" class="count">{{count}} s</span>
          <span v-show="!regShow" v-else="count<10" class="count">0{{count}} s</span>
        </el-form-item>
        <el-form-item class="i-form-item"  prop="pwd" >
          <el-input type="password"   placeholder="请输入6~20位密码" v-model="registerForm.pwd"></el-input>
        </el-form-item>
        <el-form-item class="i-form-item"  prop="cpwd" >
          <el-input type="password"  placeholder="密码二次确认" v-model="registerForm.cpwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="createUser">注册</el-button>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<span style="float: right;margin-right: 20px;">已有账号，直接<a @click="handleTurnLogin" href="javascript:;">登录</a></span>-->
        <!--</el-form-item>-->
      </el-form>
    </el-dialog>
    <el-dialog
      title="密码找回"
      :visible.sync="showForgetDialog"
      width="25%"
      :show-close = false
      center>
      <el-form class="forget-form" center :model="forgetForm"  ref="forgetForm" :rules="forgetRules" label-position="top" label-width="120px">
        <el-form-item class="i-form-item" prop="mobile">
          <el-input v-model="forgetForm.mobile" placeholder="输入注册时的手机号码"></el-input>
        </el-form-item>
        <el-form-item class="i-form-item" prop="verification">
          <el-input name="code"  v-model="forgetForm.verification" type="text" autoComplete="on"
                    placeholder="请输入验证码"></el-input>
          <span type="primary" v-show="forgetShow" class="code"  @click="getForgetCode">获取验证码</span>
          <span v-show="!forgetShow" v-if="count>=10" class="count">{{count}} s</span>
          <span v-show="!forgetShow" v-else="count<10" class="count">0{{count}} s</span>
        </el-form-item>
        <el-form-item class="i-form-item"  prop="pwd" >
          <el-input type="password"   placeholder="设置新密码" v-model="forgetForm.pwd"></el-input>
        </el-form-item>
        <el-form-item class="i-form-item"  prop="cpwd" >
          <el-input type="password"  placeholder="再次输入新密码" v-model="forgetForm.cpwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="passworReset">重设密码</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { validateMobile, validateCode } from '@/utils/validate'
// import { Message } from 'element-ui'
// import $ from 'jquery'
import ajax from '@/utils/ajax'

export default {
  name: 'index',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    var validateRegPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.pwd !== '') {
          this.$refs.registerForm.validateField('cpwd')
        }
        callback()
      }
    }
    var validateRegPass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateForgetPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.forgetForm.pwd !== '') {
          this.$refs.forgetForm.validateField('cpwd')
        }
        callback()
      }
    }
    var validateForgetPass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.forgetForm.pwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (!validateCode(value)) {
        callback(new Error('请输入4位有效的验证码'))
      } else {
        callback()
      }
    }
    return {
      showLoginDialog: false,
      showRegisterDialog: false,
      showForgetDialog: false,
      regShow: true,
      forgetShow: true,
      count: '',
      timer: null,
      second: 60,
      pwdType: 'password',
      registerForm: {
        mobile: '',
        verification: '',
        pwd: '',
        cpwd: '',
        agree: 1
      },
      registerRules: {
        mobile: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        verification: [{ required: true, message: '请输入4位有效的验证码', trigger: 'blur', validator: validateVerifyCode }],
        pwd: [{ required: true, trigger: 'blur', validator: validateRegPass },
          { min: 6, max: 20, message: '输入6~20位密码', trigger: 'blur' }],
        cpwd: [{ required: true, trigger: 'blur', validator: validateRegPass1 }]
      },
      loginForm: {
        mobile: '',
        pwd: ''
      },
      loginRules: {
        mobile: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        pwd: [{ required: true, min: 6, max: 20, message: '输入6~20位密码', trigger: 'blur' }]
      },
      forgetForm: {
        mobile: '',
        verification: '',
        pwd: '',
        cpwd: ''
      },
      forgetRules: {
        mobile: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        verification: [{ required: true, message: '请输入4位有效的验证码', trigger: 'blur', validator: validateVerifyCode }],
        pwd: [{ required: true, trigger: 'blur', validator: validateForgetPass },
          { min: 6, max: 20, message: '输入6~20位密码', trigger: 'blur' }],
        cpwd: [{ required: true, trigger: 'blur', validator: validateForgetPass1 }]
      }
    }
  },
  methods: {
    handleLogin() {
      this.showLoginDialog = true
    },
    handleReigster() {
      this.showRegisterDialog = true
    },
    handleForget() {
      this.showForgetDialog = true
    },
    handleTurnLogin() {
      this.showRegisterDialog = false
      this.showLoginDialog = true
    },
    handleTurnRegister() {
      this.showLoginDialog = false
      this.showRegisterDialog = true
    },
    getRegCode() {
      this.$refs.registerForm.validateField('mobile', (valid) => {
        if (!valid.length) {
          const self = this
          ajax.postData(process.env.BASE_API + '/verification', this.registerForm).then(function(res) {
            if (res.errCode === 0) {
              self.count = self.second
              self.regShow = false
              self.timer = setInterval(() => {
                if (self.count > 0 && self.count <= self.second) {
                  self.count--
                } else {
                  self.regShow = true
                  clearInterval(self.timer)
                  self.timer = null
                }
              }, 1000)
            }
          })
        }
      })
    },
    getForgetCode() {
      this.$refs.forgetForm.validateField('mobile', (valid) => {
        if (!valid.length) {
          const self = this
          const data = {}
          data.mobile = this.forgetForm.mobile
          ajax.postData(process.env.BASE_API + '/fpwd/verification', data).then(function(res) {
            if (res.errCode === 0) {
              self.count = self.second
              self.forgetShow = false
              self.timer = setInterval(() => {
                if (self.count > 0 && self.count <= self.second) {
                  self.count--
                } else {
                  self.forgetShow = true
                  clearInterval(self.timer)
                  self.timer = null
                }
              }, 1000)
            }
          })
        }
      })
    },
    createUser() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true
          const self = this
          ajax.postData(process.env.BASE_API + '/register', this.registerForm).then(function(response) {
            if (response.errCode === 0) {
              self.$message({ message: '注册成功', type: 'success' })
              sessionStorage.setItem('username', response.data.mobile)
              sessionStorage.setItem('isBinding', response.data.bindOffAcc)
              setTimeout(() => {
                self.$router.push({ path: '/authorize' })
              }, 2 * 1000)
            }
          })
        }
      })
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const self = this
          ajax.postData(process.env.BASE_API + '/login', this.loginForm).then(function(response) {
            if (response.errCode === 0) {
              sessionStorage.setItem('username', response.data.mobile)
              sessionStorage.setItem('isBinding', response.data.bindOffAcc)
              if (response.data.bindOffAcc === true) {
                self.$router.push({ path: '/home/index' })
              } else {
                self.$router.push({ path: '/authorize' })
              }
            }
          })
          // $.ajax({
          //   type: 'post',
          //   url: process.env.BASE_API + '/login',
          //   data: this.loginForm,
          //   dataType: 'json',
          //   success: function(response) {
          //     if (response.errCode === 0) {
          //       sessionStorage.setItem('username', response.data.mobile)
          //       sessionStorage.setItem('isBinding', response.data.bindOffAcc)
          //       self.$router.push({ path: '/home/index' })
          //     } else {
          //       Message({
          //         message: response.errMsg,
          //         type: 'error',
          //         duration: 3 * 1000
          //       })
          //     }
          //   }
          // })
        } else {
          console.log('error submit!!')
          return false
        }
      }, response => {
        // error callback
      })
    },
    passworReset() {
      this.$refs.forgetForm.validate(valid => {
        if (valid) {
          this.loading = true
          const self = this
          ajax.postData(process.env.BASE_API + '/fpwd', this.forgetForm).then(function(response) {
            if (response.errCode === 0) {
              self.$message({ message: '重置成功', type: 'success' })
              setTimeout(() => {
                self.showForgetDialog = false
              }, 2 * 1000)
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .index-container{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;


  }
  .top{
    width: 100%;
    text-align: center;
    background-image: url("../../../static/images/bg_01.png");
    img{
      margin-top: 50px;
    }
  }
  .top-content-0{
    float: right;
    margin-top: 20px;
    margin-right: 35px;
    cursor:pointer;
    color:#fff;
  }
  .top-content-1{
    padding: 125px 0 0 20px;
  }
  .top-content-2{
    /*padding: 20px 0;*/
    margin: 30px;
    color: #ffffff;
  }
  .top-content-3{
    padding-bottom: 100px;
    color: #ffffff;
  }
  .top-btn{
    border-radius: 30px;
    width:200px;
    height:45px;
    border: 1px solid #ffffff;
    background-color: rgba(22, 210, 179, 0.40);
    color: #fff;
    cursor:pointer;
  }
  .top-btn:hover{
    border-radius: 30px;
  }
  .top-btn:focus{
    border-radius: 30px;
  }
  .top-btn:visited{
    border-radius: 30px;
  }
  .center{
    background-color: #729ccd;
    width: 100%;
    height:400px;
  }
  .conter {
    margin-top: 80px;
    background-color: #ffffff;
    width:100%;
    text-align: center;
  }
  .s-pannel{
    /*padding: 20px 0;*/
    display: inline-block;
    width: 33%;
    height:250px;
    border-right: 1px solid #d9d8d8;
    padding-top: 50px;
    background: url("../../../static/images/i-02.png") no-repeat top;
    &:first-of-type {
      background: url("../../../static/images/i-01.png") no-repeat top;
    }
    &:last-of-type{
      background: url("../../../static/images/i-03.png") no-repeat top;
    }

  }
  .title{
    width: 100%;
    display: inline-block;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #056753;
  }
  .desc {
    width: 100%;
    /*margin-top: 20px;*/
    text-align: center;
    display:inline-block;
    line-height: 25px;
    font-size: 14px;
    color: #61847d;
  }
  .desc-panel{
    display: inline-block;
    border: 1px solid #000000;
    height: 300px;
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  a{
    color: #0000fe;
  }

  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__header {
    padding: 30px 70px 0px;
  }
  .el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0 70px 30px;
  }
  .i-form-item{
    margin: 30px 0;
  }
  .dialog-btn{
    border: none;
    color:#fff;
    background-color: #03cda5;
    width:100%
  }
  .dialog-btn:hover {
    color: #fff;
    border: none;
    background-color: #03cda5;
  }
  .dialog-btn:focus {
    color: #fff;
    border: none;
    background-color: #03cda5;
  }
  .el-input__inner{
    padding-left: 40px;
  }
  .i-user{
    width: 22px;
    height:22px;
    display: inline-block;
    top: 10px;
    left: 10px;
    position: absolute;
    z-index: 10;
    background: url("../../../static/images/i-user.png") no-repeat;
  }
  .i-lock{
    width: 22px;
    height:22px;
    display: inline-block;
    top: 10px;
    left: 10px;
    position: absolute;
    z-index: 10;
    background: url("../../../static/images/i-lock.png") no-repeat;
  }
  .p-left{
    color: #5d6063;
    cursor: pointer;
  }
  .p-right{
    float: right;
    margin-right: 10px;
    color: #479eee;
    cursor: pointer;
  }
  .reigster-from{
    .el-input__inner{
      padding-left: 20px;
    }
  }
  .forget-form{
    .el-input__inner{
      padding-left: 20px;
    }
  }
  .code{
    display: inline-block;
    color: #479eee;
    top: 0px;
    right: 10px;
    position: absolute;
    cursor: pointer;
  }
  .count{
    color: #b2b1b1;
    display: inline-block;
    top: 0px;
    right: 10px;
    position: absolute;
    padding: 0 10px;
  }
  .bottom {
    text-align: center;
    background-color: #efeeee;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color:#b2b1b1;
  }

</style>
